<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <script src="velocity.min.js"></script>
</head>
<body>
    <div id="app">
        <input placeholder="请输入你想要查找的名字" v-model="query"></input>
        <fade :query="query" :items="items">
            <li v-for="(item,index) in ComputedList" :key="item.msg" :data-index="index">
                {{item.msg}}
            </li>
        </fade>
        <fade :query="query" :items="games">
            <li v-for="(item,index) in GameList" :key="item.msg" :data-index="index">
                {{item.msg}}
            </li>
        </fade>
    </div>
    <script>
        Vue.component('fade',{
            props:['query','items','games'],
            functional:true,
            render(h,ctx){
                var data = {
                    props:{},
                    on:{
                        beforeEnter(el){
                            el.style.opacity = 0
                            el.style.height = 0
                        },
                        enter(el,done){
                            var delay = el.dataset.index * 150
                            setTimeout(function(){
                                Velocity(el,{opacity:1,height: '1.6em'},{complete:done})
                            },delay)
                        },
                        leave(el,done){
                            var delay = el.dataset.index * 150
                            setTimeout(function(){
                                Velocity(el,{opacity:0,height: '0'},{complete:done})
                        },delay)
                        }
                    }
                }
                return h('transition-group',data,ctx.children)
            },
            methods:{
            }
        })
        var vm = new Vue({
            el:'#app',
            data:{
                items:[{msg:"张三"},{msg:"李四"},{msg:"张某某"},{msg:"李某某"},{msg:"安欣"},],
                games:[{msg:"王五"},{msg:"李六"},{msg:"刘七"},{msg:"永杰无间"},{msg:"go学长"},],
                query:'',
                show:true
            },
            computed: {                     // 计算属性
                ComputedList () {
                    var vm = this.query		      // 获取到input输入框中的内容
                    var nameList = this.items	  // 数组
                    return nameList.filter(function (item) {
                        return item.msg.toLowerCase().indexOf(vm.toLowerCase()) !== -1
                    })
                },
                GameList () {
                    var vm = this.query		      // 获取到input输入框中的内容
                    var nameList = this.games	  // 数组
                    return nameList.filter(function (item) {
                        return item.msg.toLowerCase().indexOf(vm.toLowerCase()) !== -1
                    })
                }
            },
        })
    </script>
</body>
</html>